<template>
  <div>
    <TabTime
      :selected-tab="selectedTab"
      :tabs="tabs"
      :startDate="startDate"
      :endDate="endDate"
      @change="selectTab"
      @changeDate="changeDate"
    />
    <Bottom />
  </div>
</template>

<script setup lang="ts">
import TabTime from "./TabTime.vue";
import Bottom from "./Bottom.vue";

const lang: any = getCurrentPageLang("activity/agente");

interface TimeTabItem {
  id: number;
  title: string;
}
const tabs: TimeTabItem[] = [
  { id: 1, title: lang.tabtime_all },
  { id: 2, title: lang.tabtime_today },
  { id: 3, title: lang.tabtime_yesterday },
  { id: 4, title: lang.tabtime_last_week },
];
const selectedTab = ref(tabs[0]);
function selectTab(tab: TimeTabItem) {
  selectedTab.value = tab;
}

function initDate(date: any) {
  return formatDate(date)?.split("-");
}
const startDate = ref(initDate(new Date()));
const endDate = ref(initDate(new Date()));
function changeDate(date: any, pickerType: string) {
  if (pickerType === "start") {
    startDate.value = date;
  }
  if (pickerType === "end") {
    endDate.value = date;
  }
}
</script>

<style scoped lang="scss"></style>
